<template>
  <div>
    <h1>购物车页面</h1>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      >
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column label="序号" width="180">
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>

      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope"><img :src="scope.row.pimg" width="100px" /></template>
      </el-table-column>

      <el-table-column prop="pname" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>

      <el-table-column prop="count" label="商品数量">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.count" :min="1" :max="100" size="mini"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" @click="deleteCars(scope.row.pid)" plain>删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div align="right">
      <b>总价：<font color="red">￥{{totalPrice}}</font></b>
      <el-button type="warning" @click="goSettleAccounts" plain>结算</el-button>
    </div>
  </div>
</template>
<script>
    export default {
        name: "Car",
        data() {
            return {
                //p:this.$route.params.p, 接收商品传参
                pro: JSON.parse(sessionStorage.getItem("pro")),
                tableData: [], //前台返回carsList 用数组接收
                totalPrice: 0,
                multipleSelection: []
            }
        },
        created() {
            this.queryCarsList()
        },

        methods:{
            //查询
            queryCarsList() {
                var vm = this;
                this.axios.get("http://localhost:8083/car/queryCarList?userId=" + this.$store.getters.getUser.userId).then(function(
                    result) {
                    vm.tableData = result.data.data;
                    console.log(vm.pro.userId)
                })
            },

           /* addCar(){

                var vm = this;

                this.axios({
                    methods: "get",
                    url:"http://localhost:8085/car/addCar.sjsp?userId="+vm.pr.userId+"&pid="+vm.pr.pid+"&count="+vm.pr.count
                }).then(function (resp) {
                    vm.tableData = resp.data.data;
                }).catch(function (err) {

                })

            },*/

            //删除购物车
            deleteCars(pid){
                alert(pid);
                var vm = this;
                this.axios.get("http://localhost:8083/car/deleteCar?pid=" + pid + "&userId=" + this.$store.getters.getUser.userId).then(
                    function(result) {
                        vm.$message.success("删除成功!")
                        vm.queryCarsList();
                    }).catch(function() {
                      vm.$message.error("删除失败!")
                })
            },
            // 当复选框选中时调用的函数
            handleSelectionChange(val) {
                // 将选中的商品放到multipleSelection数组中
                this.multipleSelection = val;
                var totalPrice = 0;
                this.multipleSelection.forEach(value => {
                    // 总价 = 商品单价*商品数量
                    totalPrice += value.price*value.count;
                })
                // 截取小数点后两位
                this.totalPrice = totalPrice.toString().lastIndexOf(".")==-1?totalPrice:totalPrice.toString().substring(0,totalPrice.toString().lastIndexOf(".")+3);
            },


            // 跳转到结算页面
            goSettleAccounts(){
                var data = {
                    totalPrice: this.totalPrice,
                    product: this.multipleSelection,
                }

                sessionStorage.setItem("data",JSON.stringify(data));
                this.$router.push("settleAccounts");
            },
        }
    }
</script>

<style scoped>

</style>
